import React from "react";
import Link1 from "@/views/link.js";
import NavLink1 from "@/views/navLink.js";
import Navigateto from "@/views/navigateto.js";
import Navigatefrom from "@/views/navigatefrom.js";
import QuerySearch from "@/views/querySearch.js";
import Navigete from "@/views/navigete.js";
import UseOutletContext from "@/views/useOutletContext.js";
import UseOutletContext1 from "@/views/UseOutletContext1.js";
// import Find from "@/assets/css/index.js";
import {
  Link,
  Routes,
  Route,
  HashRouter,
  NavLink,
  Navigate,
  useRoutes,
} from "react-router-dom";
function App(props) {
  return (
    <div>
      {/* <Find> */}
        <HashRouter>
         <Link to='/link1'>Link</Link>
         <Link to='/NavLink1'>NavLink</Link>
         <Link to='/Navigatefrom'>重定向</Link>
         <Link to='/querySearch'>参数传递和手动跳转</Link>
         <Link to='/navigete'>编程导航</Link>
         <Link to='/useOutletContext'>useOutletContext</Link>
         <Routes>
          {/* /路由（解决No routes matched location "/"）报错 */}
          <Route path="/" element={<div>路由演练</div>}></Route>
          {/* 不需要/link的Route 下面的匹配/link及/link/* */}
          <Route path="/link1/*" element={<Link1></Link1>}>
            {/* <Route index element={<div>index</div>}></Route>
        <Route path='.link1' element={<div>.link1</div>}></Route>
        <Route path='.link1' element={<div>.link1</div>}></Route>
        <Route path='..link1' element={<div>..link1</div>}></Route>
        <Route path='link1' element={<div>link1</div>}></Route>
        <Route path='Link11' element={<div>Link11</div>}></Route> */}
          </Route>
          <Route path="/Navigatefrom/*" element={<Navigatefrom></Navigatefrom>}></Route>
          <Route path="/Navigateto/:id" element={<Navigateto></Navigateto>}></Route>
          <Route path="/NavLink1/*" element={<NavLink1></NavLink1>}></Route>
          <Route path="/querySearch" element={<QuerySearch></QuerySearch>}></Route>
          <Route path="/useOutletContext/*" element={<UseOutletContext></UseOutletContext>}>
          <Route context={{qq:99}} path='12' element={<UseOutletContext1></UseOutletContext1>}></Route>
          </Route>
          <Route path="/navigete/*" element={<Navigete></Navigete>}></Route>
         </Routes>
        </HashRouter>
      {/* </Find> */}
    </div>
  );
}
export default App;
